<template>
  <div>
    <el-card class="info-card" shadow="hover" header="最热文章">
      <div class="micro-articles">
        <micro
          v-for="item in hotTop"
          :key="item.id"
          :imgUrl="item.cover"
          :title="item.title"
          :author="item.userName"
          :postDate="item.updateTime"
          :linkUrl="'/post/' + item.id"
        ></micro>
      </div>
    </el-card>
    <el-card class="info-card" shadow="hover" header="排行">
      <el-tabs v-model="listActiveName" type="card">
        <el-tab-pane label="最受欢迎" name="first">
          <div class="micro-articles">
            <micro
              v-for="item in likeTop"
              :key="item.id"
              :imgUrl="item.cover"
              :title="item.title"
              :author="item.userName"
              :postDate="item.updateTime"
              :linkUrl="'/post/' + item.id"
            ></micro>
          </div>
        </el-tab-pane>
        <el-tab-pane label="最多评论" name="second">
          <div class="micro-articles">
            <micro
              v-for="item in commentTop"
              :key="item.id"
              :imgUrl="item.cover"
              :title="item.title"
              :author="item.userName"
              :postDate="item.updateTime"
              :linkUrl="'/post/' + item.id"
            ></micro>
          </div>
        </el-tab-pane>
        <el-tab-pane label="最多阅读" name="third">
          <div class="micro-articles">
            <micro
              v-for="item in readTop"
              :key="item.id"
              :imgUrl="item.cover"
              :title="item.title"
              :author="item.userName"
              :postDate="item.updateTime"
              :linkUrl="'/post/' + item.id"
            ></micro>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="info-card" shadow="hover" header="标签">
      <tag
        :url="'/search?t=' + tag.tagName"
        :text="tag.tagName"
        v-for="tag in tags"
        :key="tag.id"
      ></tag>
    </el-card>
    <el-card class="info-card" shadow="hover" header="分类">
      <category
        :text="category.categoryName + '/'"
        category-color="primary"
        :url="'/search?c=' + category.categoryName"
        v-for="category in categoryData"
        :key="category.id"
      ></category>
    </el-card>
    <el-card shadow="hover" header="网站概况">
      <statistic></statistic>
    </el-card>
  </div>
</template>

<script>
import Micro from "@/components/micro-pager";
import Statistic from "@/components/statistic";
import Tag from "@/components/tag";
import Category from "@/components/category";

export default {
  name: "right-bar",
  data() {
    return {
      // 滚屏默认激活页
      listActiveName: "first",
      // 标签数据
      tags: [],
      // 分类数据
      categoryData: [],
      hotTop: [],
      likeTop: [],
      commentTop: [],
      readTop: []
    };
  },
  methods: {},
  components: {
    Micro,
    Statistic,
    Tag,
    Category
  },
  async mounted() {
    // 获取标签数据
    let tagRes = await this.$axios({
      method: "get",
      url: "/article-service/article/tag"
    });

    this.tags = tagRes.data;

    // 获取分类数据
    let categoryRes = await this.$axios({
      method: "get",
      url: "/article-service/article/category"
    });
    this.categoryData = categoryRes.data;

    let uri = "/article-service/article/top/user?type=";
    let hotTopRes = await this.$axios({ method: "get", url: uri + "1" });
    this.hotTop = hotTopRes.data;
    let likeTopRes = await this.$axios({ method: "get", url: uri + "2" });
    this.likeTop = likeTopRes.data;
    let commentTopRes = await this.$axios({ method: "get", url: uri + "3" });
    this.commentTop = commentTopRes.data;
    let readTopRes = await this.$axios({ method: "get", url: uri + "4" });
    this.readTop = readTopRes.data;
  }
};
</script>

<style scoped></style>
